<template>
  <div>
    <div id="ContractSituation-title">本周签约情况</div>
    <div id="ContractSituation-main">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          >
          <el-table-column
            prop="team_name"
            label="团队"
            width="100"></el-table-column>
          <el-table-column
            prop="date_one"
            label="2022-10-18"
            :width="wid"></el-table-column>
            <el-table-column
            prop="date_two"
            label="2022-10-19"
            :width="wid"></el-table-column>
            <el-table-column
            prop="date_three"
            label="2022-10-20"
            :width="wid"></el-table-column>
            <el-table-column
            prop="date_four"
            label="2022-10-21"
            :width="wid"></el-table-column>
            <el-table-column
            prop="date_five"
            label="2022-10-22"
            :width="wid"></el-table-column>
            <el-table-column
            prop="date_six"
            label="2022-10-23"
            :width="wid"></el-table-column>
            <el-table-column
            prop="date_seven"
            label="2022-10-24"
            :width="wid"></el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8000"
export default {
  created(){
    axios({
      url:"/summary/getSummaryList",
      method:"get"
    }).then((res) =>{
      this.tableData = res.data
    })
  },
  data() {
    return {
      tableData: [],
      wid:144
    }
  },
  methods:{
    tableRowClassName({row, rowIndex}){
      if (rowIndex%2==0) {
        return 'warning-row';
      } else if (rowIndex%2!=0) {
        return 'success-row';
      }
      return '';
    }
  }
}
</script>

<style>
    .el-table .warning-row {
      background: white;
    }

    .el-table .success-row {
      background: #F2F7FB;
    }
    #ContractSituation-title{
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    #ContractSituation-main{
      margin-top: 20px;
    }
    #ContractSituation-main td{
      font-size: 14px;
      text-align: center;
    }
    #ContractSituation-main th{
      text-align: center;
    }
</style>